<template>
  <my-navigation-bar :myStyle="myStyle">宝宝变化</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
  <view v-if="flag">
    <view class="container" :style="flag?{marginTop: '180rpx'}:''">
      <view class="first-box">
        <text class="tip"><text class="icon-dingwei"></text>本周每一天</text>
        宝宝对声音也有喜恶啦！听到动听欢快的音乐时，TA心情会变好；听到嘈杂的摇滚乐时，TA会感到不安。
      </view>
      <view class="second-box">
        <view class="title">喂养划重点</view>
        <view class="content">
          <div class="item-box">
            <text class="num">1</text>
            <view class="text">
              <text class="bold">厌奶期：</text>
              宝宝的奶量可能突然减少，但活力很好，这种情况只是暂时的，一段时间后就能恢复食欲
            </view>
          </div>
          <div class="item-box">
            <text class="num">2</text>
            <view class="text">
              <text class="bold">建立吃-玩-睡模式：</text>
              培养宝宝的作息，尽量建立每3个小时一循环的吃喝玩模式
            </view>
          </div>
          <div class="item-box">
            <text class="num">3</text>
            <view class="text">
              <text class="bold">了解口欲期：</text>
              宝宝喜欢啃咬东西，要给玩具做好消毒
            </view>
          </div>
        </view>
      </view>
      <view class="third-box">
        <view class="title">
          良好的睡眠习惯
        </view>
        <view class="article">
          宝宝的睡眠模式和成年人不同。当宝宝有睡意时或有睡意前，就把他放入婴儿床，让宝宝自己入睡；如果宝宝在吃奶的时候就睡着了，可以停止喂奶，把他放入婴儿床入睡；如果父母发现宝宝半夜醒来后有动静，不应该立刻去安抚，而是应该安静观察宝宝是否是真的清醒了，再选择对应的安抚方式。
        </view>
      </view>
    </view>
  </view>
  
  
   <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
     <view class="container" :style="flag?{marginTop: '180rpx'}:''">
       <view class="first-box">
         <text class="tip"><text class="icon-dingwei"></text>本周每一天</text>
         宝宝对声音也有喜恶啦！听到动听欢快的音乐时，TA心情会变好；听到嘈杂的摇滚乐时，TA会感到不安。
       </view>
       <view class="second-box">
         <view class="title">喂养划重点</view>
         <view class="content">
           <div class="item-box">
             <text class="num">1</text>
             <view class="text">
               <text class="bold">厌奶期：</text>
               宝宝的奶量可能突然减少，但活力很好，这种情况只是暂时的，一段时间后就能恢复食欲
             </view>
           </div>
           <div class="item-box">
             <text class="num">2</text>
             <view class="text">
               <text class="bold">建立吃-玩-睡模式：</text>
               培养宝宝的作息，尽量建立每3个小时一循环的吃喝玩模式
             </view>
           </div>
           <div class="item-box">
             <text class="num">3</text>
             <view class="text">
               <text class="bold">了解口欲期：</text>
               宝宝喜欢啃咬东西，要给玩具做好消毒
             </view>
           </div>
         </view>
       </view>
       <view class="third-box">
         <view class="title">
           良好的睡眠习惯
         </view>
         <view class="article">
           宝宝的睡眠模式和成年人不同。当宝宝有睡意时或有睡意前，就把他放入婴儿床，让宝宝自己入睡；如果宝宝在吃奶的时候就睡着了，可以停止喂奶，把他放入婴儿床入睡；如果父母发现宝宝半夜醒来后有动静，不应该立刻去安抚，而是应该安静观察宝宝是否是真的清醒了，再选择对应的安抚方式。
         </view>
       </view>
     </view>
   </scroll-view>
  </view>

</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {computed} from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
   const {state, moveH, startH, endH} = useBounceFunc();
  const myStyle = {
    backgroundColor: "#F9FAFC"
  }
  const flag = computed(()=>{
    return getApp().globalData.isIphoneX;
  })
  const goBack = () => {
     uni.navigateBack();
  }
</script>

<style lang="scss" scoped>
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }

  @mixin ellipse($num: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $num;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
.scroll-box{
  height: 100vh;
}
  .container {
    margin-top: 150rpx;
    padding: 0 20rpx 50rpx 20rpx;
    background-color: #F9FAFC;

    .first-box {
      background-color: #fff;
      padding: 10rpx 35rpx;
      font-size: 33rpx;
      line-height: 56rpx;

      // font-weight: 540;
      .tip {
        position: relative;
        padding: 5rpx 10rpx;
        background-color: #FEF1FB;
        color: #F98AC2;
        border-radius: 20rpx;
        font-weight: normal;
        font-size: 33rpx;

        .icon-dingwei {
          position: relative;
          top: 6rpx;
          left: 3rpx;
          font-size: 45rpx;

        }
      }
    }

    .second-box {
      margin-top: 10rpx;
      padding: 30rpx 35rpx;
      background-color: #EEF7FE;

      .title {
        color: #4F8CF9;
        font-size: 50rpx;
        font-weight: 550;
      }

      .content {
        padding: 40rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-top: 30rpx;
        box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.1);

        .item-box {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          &:not(:first-child) {
            margin-top: 30rpx;
          }

          .num {
            font-size: 48rpx;
            color: #5094F6;
          }

          .text {
            margin-left: 30rpx;
            @include ellipse(3); //超过三行显示省略号 

            .bold {
              font-weight: 900;
            }
          }
        }
      }
    }

    .third-box {
      position: relative;
      padding: 78rpx 50rpx;
      margin-top: 50rpx;
      background-color: #fff;
      border-radius: 20rpx;
    box-shadow: 0 0 15rpx rgba(0,0,0,.1);
      &::before {
        position: absolute;
        top: -35rpx;
        left: 50rpx;
        content: '3个月';
        display: block;
        width: 185rpx;
        height: 80rpx;
        color: #fff;
        text-align: center;
        font-size: 39rpx;
        line-height: 80rpx;
        background: linear-gradient(to right, #F98BC2, #9DBBF7);
        border-radius: 15rpx;
      }

      .title {
        position: relative;
        font-weight: 550;
        font-size: 36rpx;
        padding-bottom: 10rpx;
        overflow: hidden;

        &::after {
          position: absolute;
          right: -30rpx;
          top: 0rpx;
          content: '行为习惯';
          font-size: 26rpx;
          color: #F98AC2;
          padding: 15rpx 40rpx 15rpx 30rpx;
          line-height: 25rpx;
          border-radius: 30rpx;
          background-color: #FEF1FB;
        }
      }

      .article {
        margin-top: 20rpx;
        line-height: 55rpx;
      }
    }
  }
</style>
